<template>
  <navbar title="邮箱" left="true">
    <template #right>
      <van-icon name="plus" style="color: #fff; font-size: 22px" @click="addEmail" />
      <van-icon name="list-switching" style="color: #fff; font-size: 22px; margin-left: 10px" @click="checkAll" v-if="isAll"/>
      <van-icon name="apps-o" style="color: #fff; font-size: 22px; margin-left: 10px" @click="toggleAll" v-else/>
      <van-icon name="delete-o" style="color: #fff; font-size: 22px; margin-left: 10px" />
    </template>
  </navbar>
  <van-notice-bar color="#1989fa" background="#ecf9ff" left-icon="envelop-o">
 已选择： {{ checked.length }}
</van-notice-bar>
  <div class="email-list">
    <van-checkbox-group v-model="checked" ref="checkboxGroup">
      <div class="each-email" v-for="item in data" :key="item">
        <div class="icon"><img src="../../../assets//img//chat/default-user.png" alt="" /></div>
        <div class="email-info">
          <div class="name"><span class="name-s1">{{ item.name }}</span><span class="name-s2">2022月 4月&nbsp;&nbsp;06:12</span></div>
          <div class="message"><span>1111111</span><van-checkbox :name="item.name"></van-checkbox></div>
        </div>
      </div>
    </van-checkbox-group>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
// import { showDialog } from 'vant'
import tabbar from '@/components/tabbar.vue'
import navbar from '@/components/navbar.vue'

// defineProps<{ msg: string }>()
const active = ref(0)
const isAll = ref(true)
// router
const router = useRouter()
const data = ref([{ name: '111', checked: false }])
const checked = ref([])
const checkboxGroup = ref(null)
const checkAll = () => {
  checkboxGroup.value.toggleAll(true)
  isAll.value = false
  console.log(checked)
}
const toggleAll = () => {
  checkboxGroup.value.toggleAll()
  isAll.value = true
  console.log(checked)

}

// 发送
const addEmail = () => {
  router.push({ path: '/write-email' })
}
onMounted(() => {})
</script>
<style scoped lang="scss">
.email-list {
}

.email-list .each-email {
  display: flex;
  align-items: center;
  padding: 10px;
}

.email-list .each-email .icon {
  width: 40px;
  height: 40px;
  margin-right: 10px;
}

.email-list .each-email .icon img {
  width: 100%;
  height: 100%;
}

.email-list .each-email .email-info {
  // padding-bottom: .53333rem;
  border-bottom: 1px solid #f0f0f0;
  // margin-bottom: .26667rem
  padding: 10px;
  display: flex;
  flex: 1;
  flex-direction: column;
}

.email-list .each-email .email-info .name {
  display: flex;
  justify-content: space-between;
}

.email-list .each-email .email-info .name .name-s1 {
  font-weight: 700;
}

.email-list .each-email .email-info .name .name-s2 {
  font-size: 0.37333rem;
  color: #999;
}

.email-list .each-email .email-info .message {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.email-list .each-email .email-info .message .check-box {
  flex-shrink: 0;
}
</style>
